<template>
  <div class="task-config-container">
    <!-- 左侧树形结构 -->
    <div class="left-panel">
      <el-card class="doc-tree-card">
        <template #header>
          <div class="card-header">
            <span class="header-title">文档结构</span>
          </div>
        </template>
        <el-scrollbar>
          <el-tree 
            :data="treeData" 
            :props="defaultProps" 
            @node-click="handleNodeClick" 
            default-expand-all
            node-key="id"
            highlight-current
            :expand-on-click-node="false"
            class="custom-tree"
          />
        </el-scrollbar>
      </el-card>
    </div>

    <!-- 中间富文本编辑区和知识库查询区 -->
    <div class="center-panel">
      <el-card>
        <el-tabs v-model="activeTab" class="content-tabs">
          <!-- 自动生成预览 -->
          <el-tab-pane label="自动生成" name="preview">
            <div class="preview-container">
              <el-button type="primary" @click="handleAutoGenerate" class="generate-btn">
                开始生成
              </el-button>
              <div class="preview-content">
                <div v-if="previewData" v-html="previewData"></div>
                <el-empty v-else description="点击上方按钮开始生成文档" />
              </div>
            </div>
          </el-tab-pane>

          <!-- 人工编辑 -->
          <el-tab-pane label="人工编辑" name="edit">
            <div class="editor-container">
              <el-form :model="formData" >
                <el-form-item label="">
                  <edit></edit>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>

          <!-- 知识库查询 -->
          <el-tab-pane label="知识库查询" name="knowledge">
            <div class="knowledge-container">
              <el-input 
                v-model="searchQuery" 
                placeholder="搜索知识库..." 
                prefix-icon="Search" 
                clearable 
                @input="handleSearch"
                class="knowledge-search"
              />
              <div class="knowledge-list">
                <el-empty v-if="knowledgeList.length === 0" description="暂无数据" />
                <el-card v-for="item in knowledgeList" 
                         :key="item.id" 
                         class="knowledge-item"
                         shadow="hover">
                  {{ item.title }}
                </el-card>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, defineProps } from 'vue';
import { Base64 } from 'js-base64';
import { ElMessage } from 'element-plus';
import edit from "./edit.vue"
// 树形数据
const treeData = ref([
  {
    label: '根节点',
    children: [{ label: '文档章节1' }, { label: '文档章节2' }],
  },
]);

const defaultProps = {
  children: 'children',
  label: 'label',
};
const activeTab = ref('preview')
const previewData = ref('')
// 表单数据
const formData = reactive({
  title: '',
  content: '',
});

// 编辑器实例

// 知识库数据
const searchQuery = ref('');
const knowledgeList = ref([]);

// 方法定义
const handleNodeClick = (data: any) => {
  console.log(data);
};

const handleAutoGenerate = () => {
  ElMessage.success('开始自动生成文档...');
};

const handleSave = () => {
  ElMessage.success('保存成功');
};

const handleSearch = () => {
  // 实现知识库搜索逻辑
};

// 初始化编辑器
onMounted(() => {
});

// 组件卸载时销毁编辑器
onBeforeUnmount(() => {
  
});
defineExpose({});
</script>

<style lang="scss" scoped>
.preview-container {
  height: 100%;
  
  .generate-btn {
    margin-bottom: 20px;
    width: 120px;
  }
  
  .preview-content {
    min-height: 300px;
    padding: 15px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
  }
}

.knowledge-container {
  height: 100%;
}
.task-config-container {
  display: flex;
  gap: 20px;
  height: 100%;

  .left-panel {
    width: 280px;
    
    .doc-tree-card {
      height: 100%;
      
      :deep(.el-card__body) {
        height: calc(100% - 55px);
        padding: 0;
      }
      
      .header-title {
        font-size: 15px;
        font-weight: 500;
      }
      
      .custom-tree {
        padding: 10px;
        
        :deep(.el-tree-node__content) {
          height: 36px;
          border-radius: 4px;
          margin: 2px 0;
          
          &:hover {
            background-color: #f5f7fa;
          }
          
          &.is-current {
            background-color: #ecf5ff;
            color: #409eff;
          }
        }
        
        :deep(.el-tree-node__label) {
          font-size: 14px;
        }
      }
    }
  }

  .center-panel {
    flex: 1;
    overflow: hidden;
    .el-card {
      height:99%;
    }
    :deep(.el-card__body) {
      height: 100%;
      padding: 0  !important ;
    }

    .content-tabs {
      height: 100%;
      display: flex;
      flex-direction: column;
      padding:0 20px;
      :deep(.el-tabs__content) {
        flex: 1;
        overflow: auto;
        padding: 20px;
      }
    }

    .editor-container {
      height: 100%;
    }

    .knowledge-search {
      margin-bottom: 20px;
    }

    .knowledge-list {
      .knowledge-item {
        margin-bottom: 10px;
        cursor: pointer;

        &:hover {
          background-color: #f5f7fa;
        }
      }
    }
  }
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
